<template>
	<view class="play-item" :data-url="'/pages/play/play?id='+item._id" @click="navigateTo">
		<view class="iconfont play-btn">&#xe611;</view>
		<view class="info-wraper">
			<view class="title">{{item.name}}</view>
			<view class="author">{{item.author}}</view>
		</view>
		<view class="duration">{{item.duration}}</view>
	</view>
</template>

<script>
	export default{
		props: ['item'],
		methods:{
			navigateTo(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			}
		}
	}
</script>

<style lang="scss">
.play-item{
	display: flex;
	align-items: center;
	padding: 40upx 0;
	border-bottom: solid 1upx rgba(255,255,255,0.2);
	&:last-of-type{
		border: 0;
	}
	.play-btn{
		flex: 0 0 auto;
		width: 3.6em;
		height: 3.6em;
		display: flex;
		align-items: center;
		justify-content: center;
		border: solid 1upx rgba(255,255,255,0.2);
		border-radius: 50%;
		margin-right: 40upx;
		font-size: $font-size-sm;
	}
	.title{
		letter-spacing: 2upx;
		font-size: $font-size-md;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.author,.duration{
		font-size: $font-size-sm;
		opacity: 0.5;
	}
	.author{
		margin-top: 15upx;
	}
	.duration{
		flex: 0 0 auto;
		padding-left: 40upx;
	}
	.info-wraper{
		flex: 1 1 auto;
	}
}
</style>
